<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>visual_viewport</title>
  <meta name="viewport"
        content="width=device-width; initial-scale=2; maximum-scale=10; minimum-scale=0; user-scalable=no;">
  <style>
    html {
      overflow: scroll;
      /*border:1px solid black;*/
    }
    body{
      margin:0;
    }
  </style>
</head>
<body>
<!--<img src="../img/视觉视口.jpg" alt="">-->
<div>
视觉视口(visual viewport)：用户通过屏幕真实看到的区域。

视觉视口默认等于当前浏览器的窗口大小（包括滚动条宽度）。

当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。

例如：用户将浏览器窗口放大了200%，这时浏览器窗口中的CSS像素会随着视觉视口的放大而放大，这时一个CSS像素会跨越更多的物理像素。

页面的缩放系数 = CSS像素 / 设备独立像素。

initial-scale = 理想视口宽度(恒定) / 视觉视口宽度 √ ← 我们可以发现当 initial-scale 置为2 时 window.innerWidth变成了原先的一半 即视觉视口变为了原先的一半

>上面是从视口层面来看缩放，但缩放的本质是: 放大一倍,即是让原本渲染的一个物理像素,现在用四个来渲染 1->2x2,反之亦然
</div>

<div style="border:1px solid red;width:187px;"></div>

<script>
    //和document.documentElement.clientHeight的区别在于(只在pc端有区别) window.innerWidth包含滚动条的轨道宽度
    console.log('window.innerWidth:', window.innerWidth); // iphone6/7/8 下如果不进行缩放时 和 layout_viewport 是一样的
    console.log('window.innerHeight:', window.innerHeight);
    console.log('document.documentElement.clientWidth:',document.documentElement.clientWidth) //布局视口
</script>
</body>
</html>
